<template>
<div class="leftChart1" :style="{backgroundColor:skinMode.containerBg}">
  <div class="leftChart1_title">
    XXX数据流量统计
  </div>
  <div class="leftChart1_total">
    当前数据总流量:
    <span :style="{color:skinMode.leftNumColor}">
      {{ chartConfig.total }}
    </span>
  </div>
  <div class="leftChart1_container">
    <dv-capsule-chart :config="chartConfig.config" class="leftChart1_chart"/>
  </div>
  <dv-decoration-10 style="width:90%;height:5px;" :dir="5"/>
  <div class="leftChart1_container">
    <dv-capsule-chart :config="chartConfig.config" class="leftChart1_chart"/>
  </div>
</div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive} from "vue";
import {useStore} from "vuex";
import $bus from '@/utils/bus/index'
import api from "@/api";
import {skin} from "@/utils/interface";
import original from "@/views/homeView/skin/original";

interface chart {
  config:{
    data:{name:string;value:number}[]
    showValue:boolean,
    unit:string
  }
  total:number
}
const store = useStore()
const skinMode = computed(():skin => {
  return store.state.home.skinMode?store.state.home.skinMode:original
})

let chartConfig = reactive<chart>({
  config:{
    data: [],
    showValue: true,
    unit:'个'
  },
  total:0
})
onMounted(() => {
  $bus.homeBus.on('updateHome',() => {
    api.chart.getChartTotal().then((res) => {
      chartConfig.config.data = res
      if(res){
        let total = 0
        res.forEach((item) =>{
          total += item.value
        })
        chartConfig.total = total
      }else {
        chartConfig.total = 0
      }
      chartConfig.config = {...chartConfig.config}
    })
  })
})
</script>

<style scoped lang="scss">
.leftChart1{
  padding: 20px;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  .leftChart1_title{
    margin-top: 10px;
    height: 30px;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    font-weight: 600;
  }
  .leftChart1_total{
    height: 50px;
    margin-top: 8px;
    font-size: 16px;
    text-align: center;
    span {
      font-weight: bold;
      font-size: 35px;
      margin-left: 80px;
    }
  }
  .leftChart1_container{
    padding-top: 20px;
    height: calc((100% - 80px)/2);
    display: flex;
    flex-grow: 0;
    flex-direction: column;
  }

}
</style>